還在和BS作業奮鬥。
今天突然發現JS30這個超讚的JS課程，充滿了相見恨晚之感，決定明天開始找時間練習。
這個練習有用到一些BS標籤，可以比較快速的製作。
要刻對齊全頁面的垂直置中毛玻璃效果，首先設定HTML
<body class="d-flex justify-content-center align-items-center">
<div class="card bg-transparent d-flex justify-content-center align-items-center p-5 text-white">
<div class="card-bg-glass"></div>
<p>
(略)
</p>
</div>
</body>
中間的<div class="card-bg-glass"></div>就是製作效果的地方。
來看CSS吧。
首先在body放入大到可以占滿全部畫面的背景圖，並進行設定：
body {
height: 100vh;
background: url(圖片位置) no-repeat;
}
設定.card為position: relative;，讓.card-bg-glass可以進行定位
.card {
width: 600px;
height: 300px;
position: relative;
}
目前畫面長這樣，可以看到置中的地方有一點邊框
開始製作毛玻璃效果
.card-bg-glass {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1; //向下一層避免蓋住文字
background: url(同樣的圖片);
background-attachment: fixed;
這時畫面和上方沒有不同，是因為background-attachment: fixed;會跟著畫面定位背景圖片要出現的位置。
開始模糊背景，加上filter: blur(10px);，可以看到背景已經呈現霧狀
為了讓四周也模糊的比較平均，加上margin: -20px;讓模糊擴大
這時會發現模糊的範圍超過card原本的範圍，需要修改，所以再card上加入overflow: hidden;就完成了
再依需求加入陰影修改就完成了
box-shadow: 0 0 0 1px #ffffff3f inset, 0 8px 16px black;
iThome鐵人賽
看影片追技術